<template>
	<view class="map-page">
		<view class="">
			<!-- 地图 -->
			<map style="width: 100%; height: 100vh;" enable-zoom :latitude="mapData.lat" :longitude="mapData.lng" :markers="mapData.covers" @markertap="markerClick"></map>
			<cover-view class='dev_info' v-if="mapData.clickData != ''">
				<cover-view class='flex' v-if='mapData.clickData.type == 1'>
					<cover-view class='left'>
						<cover-view class="flex">
							<cover-view>设备编号:</cover-view>
							<cover-view>{{mapData.clickData.macno}}</cover-view>
						</cover-view>
						<cover-view class='flex'>
							<cover-view>设备地址:</cover-view>
							<cover-view style="white-space:pre-wrap;">{{mapData.clickData.complete_address}}</cover-view>
						</cover-view>
						<cover-view class="flex">
							<cover-view>容量状态:</cover-view>
							<cover-view class='flex'>
								<cover-view v-for="(item,index) in mapData.clickData.class" :key="index"  class="flex">
									<cover-view>
										{{item.class_name}}
									</cover-view>
									<cover-view  :class="item.fullness_now == 0 ? '_green': '_red'">
										
										{{ item.fullness_now == 0 ? '未满': item.fullness_now == 1 ?'已满': item.fullness_now == 2 ?'异常':'未知'}}
										                
									</cover-view>
								</cover-view>
							</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class='right'>
						<cover-view @click='daohan'>
							{{mapData.clickData.distance}}公里
						</cover-view>
						<cover-image src="../../static/icon_daohang.png" @click='daohan'></cover-image>
					</cover-view>
				</cover-view>
				
				<cover-view class='flex' v-else>
					<cover-view class='left'>
						<cover-view class="flex">
							<cover-view>商家名称:</cover-view>
							<cover-view>{{mapData.clickData.merchant_name}}</cover-view>
						</cover-view>
						<cover-view class='flex'>
							<cover-view>商家状态:</cover-view>
							<cover-view style="white-space:pre-wrap;">{{mapData.clickData.status==1?'在线':'离线'}}</cover-view>
						</cover-view>
						<cover-view class="flex">
							<cover-view>商家电话:</cover-view>
							<cover-view>
								{{mapData.clickData.merchant_phone}}
							</cover-view>
						</cover-view>
						<cover-view class='flex'>
							<cover-view>商家地址:</cover-view>
							<cover-view style="white-space:pre-wrap;">{{mapData.clickData.complete_address}}</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class='right' >
						<cover-view @click='daohan'>
							{{mapData.clickData.distance}}公里
						</cover-view>
						<cover-image src="../../static/icon_daohang.png" style="z-index: 1000000000;" @click='daohan'></cover-image>
					</cover-view>
				</cover-view>
				
				
			</cover-view>
			<cover-view class='scan' @click='scan'>扫码使用</cover-view>
			<cover-view class='right'>
				<cover-view>
					<cover-image class='icon' src="../../static/icon_12.png" @click='gotomine'></cover-image>
				</cover-view>
				<cover-view>
					<cover-image class='icon' src="../../static/icon_11.png" @click='gotoguzhang'></cover-image>
				</cover-view>
			</cover-view>
		</view>
	</view>
</template>

<script>
	let jweixin = require('jweixin-module');
	export default {
		data() {
			return {
				nearbyDevice:[], // 地图返回数据
				nearbyMerchant: [],
				mapData:{
				  //**********这里是必须有的数据**********
				  zoom:16,              //初始化缩放等级
				  lat:43.988148,    //初始化经度
				  lng:87.675091,   //初始化纬度
				  lang:"zh_cn",         //语言en，zh_en, zh_cn
				  //******************地图控件开关********************不写默认为关
				  //工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
				  toolBarType:false,
				  //比例尺控件，展示地图在当前层级和纬度下的比例尺
				  scaleType:false,
				  //鹰眼控件，在地图右下角显示地图的缩略图
				  overViewType:false,
				  //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
				  mapClassType:false,
				  //定位控件，用来获取和展示用户主机所在的经纬度位置
				  geolocationType:true,
				  buttonPosition:"RB", // 定位点的位置
				  //**********这里是可选的如果<不写>责使用默认**********
				  //=================数组标记点=================
				  //不写责不创建地图标记点
				  markers:[             //标记点数据纬度lng与经度lat名称不要修改
		
				  ],
				  //=================数组标记点图标设置=================
				  //使用默认可以不写
				  markersIcon:{         //坐标点数据
					type:true,         //是否修改默认标记点false使用默认true使用自定义
					widthSize:54,       //图片在地图上展示的尺寸
					heightSize:54,      //图片在地图上展示的尺寸
					imageWidth:54,      //图片原始尺寸
					imageHeight:54,     //图片原始尺寸
					image: require("../../static/nav_green.png"),//图片链接地址
				  },
				  //=================当前位置标记点=================
				  //true显示false不显示 不写默认显示
				  myMarkType:true,
				  //=================当前位置标记点图标=================
				  //使用默认可以不写
				  covers: [{
					latitude: 43.988148,
					longitude: 87.675091,
					iconPath: '../../static/icon_dw.png'
				  }],
				  myIcon:{         //坐标点数据
					type:true,         //是否修改默认标记点false使用默认true使用自定义
					widthSize: 20,       //图片在地图上展示的尺寸
					heightSize: 28,      //图片在地图上展示的尺寸
					imageWidth: 20,      //图片原始尺寸
					imageHeight: 28,     //图片原始尺寸
					image:require("../../static/icon_dw.png"),//图片链接地址
				  },
				  //=================点击标示获取信息===================
				  //点击标记获取标记信息 默认开启
				  //开启后点击地图标示,获取对应markers内的数据放进clickData
				  clickDataType:true,
				  //获取到的内容为markers下对应的对象内容 用于导航或展示等功能
				  clickData:"",
				  //===================对焦=================
				  //点击地图标示后是否对焦到标示地点 默认开启
				  focusType:true,
				  //点击地图标示后对焦到标示地点的地图缩放大小默认16
				  focusZoom:16,
				  //==================导航/距离计算===================
				  //点击后导航当前位置与点击目标位置的路线图
				  //=======================
				  //导航开关
				  NavigationType: false,
				  //导航  方式1步行2骑行3驾车 不写责默认骑行  与计算方式共通
				  Navigation:2,
				  //计算距离开关
				  distanceType:false,
				  //距离值
				  // distanceNum:"0",
				}
			}
		},
		onLoad() {
			// var _this = this
			// uni.showLoading({
			//  	title: '授权中',
			//  	mask: true
			//  });
			// console.log("进入开始")
			// var tempopenid  = uni.getStorageSync('OPENID')
			// console.log("获取当前页面的url")
			// var appid = 'wx90023bc01d0bad80'
			// console.log("判断appid 是否存在url中"+appid)
			// if (appid == null) {
			// 	console.log("appid 是空的 然后给一个默认值 ")
			// 	appid = 'wx90023bc01d0bad80'
			// } 
			// uni.setStorageSync("appid",appid);
			// console.log("appid:" + appid)
			// //获取当前页面的url
			// let link = window.location.href;
			// console.log(link,'link');
			// const openid = uni.getStorageSync('OPENID');
			// var urlcode = ''
			// var codeurl = ''
			// if(link.indexOf('code=') != -1){
			// 	let temp = link.split("code=")[1];
			// 	codeurl = temp.split("&")[0];
			// 	console.log(codeurl,'code');
			// 	urlcode = codeurl
			// }
			// console.log("openid:"+openid)
			// console.log("urlcode:"+urlcode)
			// if(openid == '' && urlcode == ''){
			// 	console.log("进入这里1")
			// 	//不存在存储的code 不存在地址参数code 不存在openid
			// 	//存储当前初始页面历史列表数量
			// 	uni.setStorageSync("historyLength",history.length);
			// 	let uri = encodeURIComponent(link);
			// 	let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
			// 	console.log("授权url："+authURL)
			// 	// window.location.href = authURL;
			// 	// 去微信获取code
			// 	// document.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`);
			// 	document.location.replace(authURL);
			// }else if(urlcode != '' && openid == ''){
			// 	console.log("进入这里2")
			// 	//回调函数已经执行 返回的链接存在code= 地址解析
			// 	//存在地址参数code 不存在openid
			// 	console.log("回调函数已经执行 返回的链接存在code")
			// 	console.log("存在地址参数code 不存在openid")
			// 	console.log(urlcode)
			// 	//请求后端接口获取用户的信息
			// 	// let result = await getWxAuthorize({code,scope:"snsapi_userinfo"});
			// 	uni.request({
			// 		url: '/wxsite/Index/getWxUserInfo',
			// 		method: 'POST',
			// 		header:{
			// 			"Content-Type" : "application/x-www-form-urlencoded"
			// 		},
			// 		data: {
			// 			code: urlcode,
			// 		},
			// 		success: (res) => {
			// 			console.log(res)
			// 			console.log(res.data.code )
			// 			uni.hideLoading()
						
			// 			if (res.data.code == 1) {
			// 				_this.user = res.data.data
			// 				// uni.setStorageSync('openid', openid)
			// 				uni.setStorageSync('OPENID',res.data.data.openid);
							
			// 			} else {
			// 				console.log("设置授权失败")
			// 				return false;
			// 			}
			// 		},
			// 		fail() {
			// 			uni.hideLoading()
			// 			console.log(`后端返回失败 `)
			// 			return false;
			// 		}
			// 	});
			// 	//保存用户的openid
			// }else{
			// 	uni.hideLoading()
			// 	console.log("openid缓存1："+uni.getStorageSync('OPENID'))
			// 	console.log("openidtemp1："+tempopenid)
			// 	console.log("结束1")
				
			// }
		},
		mounted() {
			this.getTick()
			// this.getdevList()
		},
		methods: {
			gotomine(){
				uni.reLaunch({
					url: '/pages/home/home?type=1'
				})
			},
			getTick(){
				var _this = this
				uni.request({
					url: '/wxsite/index/getWxJsApiTicketconfig',
					method: 'POST',
					header:{
						"Content-Type" : "application/x-www-form-urlencoded"
					},
					data: {
						url: location.href,
					},
					success: (res) => {
						const dataInfo = res.data.data;
						if (res.data.code == 1) {
							 let jsApiParameters  = {
								   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端//alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								   appId: dataInfo.appid, // 必填，公众号的唯一标识
								   timestamp: dataInfo.result.timestamp, // 必填，生成签名的时间戳
								   nonceStr: dataInfo.result.noncestr, // 必填，生成签名的随机串
								   signature: dataInfo.result.signature,// 必填，签名，见附录1
								   jsApiList: ['scanQRCode','getLocation','openLocation','chooseImage','getLocalImgData'],
							   }
								jweixin.config(jsApiParameters);
								  jweixin.ready(function(){
									jweixin.getLocation({
										type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
										success: function (resl) {
											_this.mapData.lat = resl.latitude
											_this.mapData.lng = resl.longitude
											
										   _this.getdevList()
										},
										fail: function(){
											_this.show = true
										},
										complete(){
											_this.show = true
										}
										
									});
								  });
							// window.location.reload()
						} else {
							console.log("设置授权失败")
							return false;
						}
					},
					fail() {
						uni.hideLoading()
						console.log(`后端返回失败 `)
						return false;
					}
				});
			},
			getdevList(){
				var _this = this
				this.fq_get('wxsite/Delivery/nearbyDevice', {
					lng: _this.mapData.lng,
					lat: _this.mapData.lat
				}, (res) => {
					if(res.code == 1){
						console.log(res)
						var dev = res.data.nearbyDevice
						var merchant = res.data.nearbyMerchant
						var list = dev.map((item)=>{
							if(item.is_online == 1){
								return {
									...item,
									latitude: item.lat,
									longitude: item.lng,
									iconPath: '../../static/nav_green.png'
								}
							}else{
								return {
									...item,
									latitude: item.lat,
									longitude: item.lng,
									iconPath: '../../static/nav_red.png'
								}
							}
						})
						var merchant = merchant.map((item)=>{
							if(item.is_online == 1){
								return {
									...item,
									latitude: item.lat,
									longitude: item.lng,
									iconPath: '../../static/icon001.png'
								}
							}else{
								return {
									...item,
									latitude: item.lat,
									longitude: item.lng,
									iconPath: '../../static/icon002.png'
								}
							}
						})
						_this.mapData.covers = _this.mapData.covers.concat(list)
						_this.mapData.covers = _this.mapData.covers.concat(merchant)
						console.log(_this.mapData.covers)
						_this.nearbyDevice = res.data.nearbyDevice
						_this.nearbyMerchant = res.data.nearbyMerchant
						
					}
				})
			},
			markerClick(e){
				var _this = this
				console.log(e)
				var id = e.detail.markerId
				_this.mapData.covers.map((item)=>{
					if(item.id == id){
						_this.mapData.clickData = item
					}
				})
				console.log(_this.mapData.clickData)
			},
			daohan(){
				var _this = this
				var list = this.mapData.clickData
				console.log(list)
				uni.request({
					url: '/wxsite/index/getWxJsApiTicketconfig',
					method: 'POST',
					header:{
						"Content-Type" : "application/x-www-form-urlencoded"
					},
					data: {
						url: location.href,
					},
					success: (res) => {
						const dataInfo = res.data.data;
						if (res.data.code == 1) {
							 let jsApiParameters  = {
								   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端//alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								   appId: dataInfo.appid, // 必填，公众号的唯一标识
								   timestamp: dataInfo.result.timestamp, // 必填，生成签名的时间戳
								   nonceStr: dataInfo.result.noncestr, // 必填，生成签名的随机串
								   signature: dataInfo.result.signature,// 必填，签名，见附录1
								   jsApiList: ['scanQRCode','getLocation','openLocation','chooseImage','getLocalImgData'],
							   }
								jweixin.config(jsApiParameters);
								  jweixin.ready(function(){
									  console.log(list)
									jweixin.openLocation({
										latitude: parseFloat(list.lat), // 纬度，浮点数，范围为90 ~ -90
										longitude: parseFloat(list.lng), // 经度，浮点数，范围为180 ~ -180。
										name: list.name, // 位置名
										address: list.complete_address, // 地址详情说明
										scale: 10 // 地图缩放级别,整形值,范围从1~28。默认为最大
									  });
								  });
							// window.location.reload()
						} else {
							console.log("设置授权失败")
							return false;
						}
					},
					fail() {
						uni.hideLoading()
						console.log(`后端返回失败 `)
						return false;
					}
				});
			},
			scan(){
				jweixin.ready(function(){
					jweixin.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: function (res) {
							console.log(res)
							let result = res.resultStr;
							uni.reLaunch({
								url: result
							})
						},
						error: function (err) {
							alert('出错了');
						}
					});
				});
			},
			gotoguzhang(){
				uni.reLaunch({
					url: '/pages/admin/errorService'
				})
			}
		}
	}
</script>

<style scoped>
.map-page{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
}
.map-container{
	flex: 1;
}
.dev_info{
	position: fixed;
	top: 10px;
	width:96%;
	box-sizing: border-box;
	left: 2%;
	background: #fff;
	/* padding: 10px 15px; */
	padding: 10px;
	
}
.flex{
	display: flex;
	/* flex-wrap: wrap; */
	justify-content: space-between;
	align-items: center;
}
.left{
	/* margin-right: 20px; */
	width: 75%;
}
.right{
	width: 20%;
}
.left .flex{
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: wrap;
	font-size: 16px;
	font-weight: bold;
	line-height: 30px;
}
._green{
	background: green;
	color: #fff;
	border-radius: 10px;
	text-align: center;
	font-size: 14px;
	padding: 0 10px;
}
._red{
	background: red;
	color: #fff;
	border-radius: 10px;
	text-align: center;
	font-size: 14px;
}
.scan{
	width: 150px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #79ffa6;
	position: fixed;
	bottom: 20px;
	border-radius: 20px;
	left: 50%;
	margin-left: -75px;
	color:#fff;
}
.right{
	width: 50px;
	position: fixed;
	right: 10px;
	bottom: 100px;
	display: flex;
	flex-wrap: wrap;
}
.icon{
	width: 50px;
	height: 50px;
	margin-top: 10px;
}
</style>
